<template>
  <el-drawer v-model="drawer" :close-on-click-modal="false" :direction="direction">
    <template #header>
      <h4>编辑订单</h4>
    </template>
    <template #default>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" label-position="top">
        <el-form-item label="订单ID" prop="id">
          <el-input v-model="ruleForm.id" placeholder="订单ID" disabled/>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="ruleForm.userId" placeholder="请输入用户ID" disabled/>
        </el-form-item>
        <el-form-item label="酒店名称" prop="hotelName">
          <el-input v-model="ruleForm.hotelName" placeholder="酒店名称" disabled/>
        </el-form-item>
        <el-form-item label="房型" prop="roomType">
          <el-input v-model="ruleForm.roomType" placeholder="房型" disabled/>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input-number v-model="ruleForm.amount" :precision="2" :step="0.01" :min="0" style="width: 100%"/>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-select v-model="ruleForm.paymentMethod" placeholder="请选择支付方式" style="width: 100%">
            <el-option label="支付宝" value="支付宝"/>
            <el-option label="微信" value="微信"/>
            <el-option label="信用卡" value="信用卡"/>
            <el-option label="现金" value="现金"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作">
          <el-button type="primary" @click="handlePay" v-if="!ruleForm.payTime && !ruleForm.cancelTime">支付订单</el-button>
          <el-button type="warning" @click="handleCancel" v-if="!ruleForm.payTime && !ruleForm.cancelTime">取消订单</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { updateOrder, payOrder, cancelOrder } from '@/api/order'

const emit = defineEmits(['refresh'])

interface RuleForm {
  id: number
  userId: string
  hotelName: string
  roomType: string
  amount: number
  paymentMethod: string
  createTime?: string
  payTime?: string
  cancelTime?: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  id: null,
  userId: '',
  hotelName: '',
  roomType: '',
  amount: 0,
  paymentMethod: ''
})

const drawer = ref(false)
const direction = ref<'rtl' | 'ltr' | 'ttb' | 'btt'>('rtl')

const rules = reactive<FormRules<RuleForm>>({
  amount: [{ required: true, message: '请输入金额', trigger: 'change' }],
  paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'change' }]
})

// 支付订单
const handlePay = () => {
  payOrder({ orderId: ruleForm.id }).then(res => {
    console.log('支付订单响应:', res);
    const result = res.data;
    if (result && result.code === 200) {
      ElMessage.success('支付成功');
      handleClose();
      emit('refresh');
    } else {
      ElMessage.error(result?.msg || '支付失败');
    }
  }).catch(error => {
    console.error('支付订单错误:', error);
    ElMessage.error('网络错误，支付订单失败');
  });
}

// 取消订单
const handleCancel = () => {
  cancelOrder(ruleForm.id.toString()).then(res => {
    console.log('取消订单响应:', res);
    const result = res.data;
    if (result && result.code === 200) {
      ElMessage.success('取消成功');
      handleClose();
      emit('refresh');
    } else {
      ElMessage.error(result?.msg || '取消失败');
    }
  }).catch(error => {
    console.error('取消订单错误:', error);
    ElMessage.error('网络错误，取消订单失败');
  });
}

const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      console.log('提交更新订单数据:', ruleForm);
      
      updateOrder({
        id: ruleForm.id,
        amount: ruleForm.amount,
        paymentMethod: ruleForm.paymentMethod
      }).then(res => {
        console.log('更新订单响应:', res);
        
        const result = res.data;
        if (result && result.code === 200) {
          ElMessage.success('修改成功')
          handleClose()
          emit('refresh')
        } else {
          ElMessage.error(result?.msg || '修改失败')
        }
      }).catch(error => {
        console.error('更新订单错误:', error);
        ElMessage.error('网络错误，更新订单失败');
      });
    }
  })
}
const handleClose = () => {
  drawer.value = false
}
const open = (row: any) => {
  console.log('打开编辑抽屉，行数据:', row);
  drawer.value = true;
  Object.assign(ruleForm, row);
}
defineExpose({ open })
</script>
